<!-- ------------------------------------------------------------------------- -->
<!-- ------------------------------------------------------------------------- -->
<!-- ---------------------- 流调管理--确诊病例管理 ---------------------------- -->
<!-- ------------------------------------------------------------------------- -->
<!-- ------------------------------编辑的tag---------------------------------- -->
<!-- -------------------------编辑的tag--基本信息----------------------------- -->

<template>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <el-form-item label="病例类型:" prop="caseType">
      <!-- <el-input v-model="ruleForm.name" /> -->
      <el-button>普通病例</el-button>
      <el-button type="primary">协查病例</el-button>
    </el-form-item>

    <el-form-item label="协查函:" prop="assistanceLetter">
      <el-button type="primary">上传</el-button>
    </el-form-item>

    <el-form-item label="病例来源:" prop="caseSource">
      <el-radio-group v-model="ruleForm.caseSource">
        <el-radio label="境内" />
        <el-radio label="境外" />
      </el-radio-group>
    </el-form-item>

    <el-row>
      <el-col :span="12"
        ><div class="grid-content ep-bg-purple" />
        <el-form-item
          label="姓名"
          prop="name"
          style="margin-right: 100px; width: 500px"
        >
          <el-input v-model="ruleForm.name" />
        </el-form-item>
      </el-col>
      <el-col :span="12"
        ><div class="grid-content ep-bg-purple-light" />
        <el-form-item label="性别:" prop="sex">
          <el-radio-group v-model="ruleForm.sex">
            <el-radio label="男" />
            <el-radio label="女" />
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12"
        ><div class="grid-content ep-bg-purple" />
        <el-form-item
          label="年龄:"
          prop="age"
          style="margin-right: 100px; width: 500px"
        >
          <el-input v-model="ruleForm.age" />
        </el-form-item>
      </el-col>
      <el-col :span="12"
        ><div class="grid-content ep-bg-purple-light" />
        <el-form-item label="出生日期:" prop="birthday">
          <el-date-picker
            v-model="value1"
            type="date"
            placeholder="Pick a date"
            :default-value="new Date(2010, 9, 1)"
            style="width: 375px"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12"
        ><div class="grid-content ep-bg-purple" />
        <el-form-item
          label="身份证/护照号:"
          prop="idNum"
          style="margin-right: 100px; width: 500px"
        >
          <el-input v-model="ruleForm.idNum" />
        </el-form-item>
      </el-col>
      <el-col :span="12"
        ><div class="grid-content ep-bg-purple-light" />
        <el-form-item
          label="联系电话:"
          prop="phoneNum"
          style="margin-right: 100px; width: 500px"
        >
          <el-input v-model="ruleForm.phoneNum" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12"
        ><div class="grid-content ep-bg-purple" />
        <el-form-item
          label="职业:"
          prop="job"
          style="margin-right: 100px; width: 500px"
        >
          <el-input v-model="ruleForm.job" />
        </el-form-item>
      </el-col>
      <el-col :span="12"
        ><div class="grid-content ep-bg-purple-light" />
        <el-form-item
          label="工作/学习单位:"
          prop="workUnit"
          style="margin-right: 100px; width: 500px"
        >
          <el-input v-model="ruleForm.workUnit" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12"
        ><div class="grid-content ep-bg-purple" />
        <el-form-item
          label="工作/学习地址:"
          prop="workAddress"
          style="margin-right: 100px; width: 500px"
        >
          <el-input v-model="ruleForm.workAddress" />
        </el-form-item>
      </el-col>
      <el-col :span="12"
        ><div class="grid-content ep-bg-purple-light" />
        <el-form-item
          label="户籍地址:"
          prop="residenceAddress"
          style="margin-right: 100px; width: 500px"
        >
          <el-input v-model="ruleForm.residenceAddress" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item
      label="现住地:"
      prop="address"
      style="margin-right: 100px; width: 500px"
    >
      <el-input v-model="ruleForm.address" />
    </el-form-item>

    <!-- 图片位置 -->

    <el-form-item
      label="境外地址:"
      prop="overseasAddress"
      style="margin-right: 100px; width: 500px"
    >
      <el-input v-model="ruleForm.overseasAddress" />
    </el-form-item>

    <el-row>
      <el-col :span="12"
        ><div class="grid-content ep-bg-purple" />
        <el-form-item
          label="家庭居住环境:"
          prop="livingEnvironment"
          style="margin-right: 100px; width: 500px"
        >
          <el-input
            v-model="ruleForm.livingEnvironment"
            style="height: 150px"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12"
        ><div class="grid-content ep-bg-purple-light" />
        <el-form-item
          label="主要家庭信息:"
          prop="familyMembersInfo"
          style="margin-right: 100px; width: 500px"
        >
          <el-input
            v-model="ruleForm.familyMembersInfo"
            style="height: 150px"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item label="疫苗接种情况:" prop="name">
      <el-table :data="tableData" style="width: 60%" border="true">
        <el-table-column
          prop="date"
          label="接种次数"
          width="180"
          align="center"
        />
        <el-table-column
          prop="name"
          label="疫苗品牌"
          width="180"
          align="center"
        />
        <el-table-column prop="address" label="接种时间" align="center" />
      </el-table>
    </el-form-item>

    <el-row>
      <el-col :span="12"
        ><div class="grid-content ep-bg-purple" />
        <el-form-item
          label="身高(CM):"
          prop="height"
          style="margin-right: 100px; width: 500px"
        >
          <el-input v-model="ruleForm.height" />
        </el-form-item>
      </el-col>
      <el-col :span="12"
        ><div class="grid-content ep-bg-purple-light" />
        <el-form-item
          label="体重(KG):"
          prop="weight"
          style="margin-right: 100px; width: 500px"
        >
          <el-input v-model="ruleForm.weight" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12"
        ><div class="grid-content ep-bg-purple" />
        <el-form-item label="管控时间:" prop="controlTime">
          <el-date-picker
            v-model="value1"
            type="date"
            placeholder="请选择"
            :default-value="new Date()"
            style="width: 375px"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12"
        ><div class="grid-content ep-bg-purple-light" />
        <el-form-item
          label="管控情况:"
          prop="controlSituation"
          style="margin-right: 100px; width: 500px"
        >
          <el-input v-model="ruleForm.controlSituation" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12"
        ><div class="grid-content ep-bg-purple" />
        <el-form-item
          label="入境前居住或旅行的国家或地区:"
          prop="otherCountry"
          style="margin-right: 100px; width: 500px"
        >
          <el-input v-model="ruleForm.otherCountry" style="height: 150px" />
        </el-form-item>
      </el-col>
      <el-col :span="12"
        ><div class="grid-content ep-bg-purple-light" />
        <el-form-item
          label="入境前途径国家或地区:"
          prop="route"
          style="margin-right: 100px; width: 500px"
        >
          <el-input v-model="ruleForm.route" style="height: 150px" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12"
        ><div class="grid-content ep-bg-purple" />
        <el-form-item
          label="国籍:"
          prop="country"
          style="margin-right: 100px; width: 500px"
        >
          <el-input v-model="ruleForm.country" />
        </el-form-item>
      </el-col>
      <el-col :span="12"
        ><div class="grid-content ep-bg-purple-light" />
        <el-form-item
          label="护照号:"
          prop="passportNum"
          style="margin-right: 100px; width: 500px"
        >
          <el-input v-model="ruleForm.passportNum" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12"
        ><div class="grid-content ep-bg-purple" />
        <el-form-item
          label="入境口岸:"
          prop="entryPort"
          style="margin-right: 100px; width: 500px"
        >
          <el-input v-model="ruleForm.entryPort" />
        </el-form-item>
      </el-col>
      <el-col :span="12"
        ><div class="grid-content ep-bg-purple-light" />

        <el-form-item label="入境日期:" prop="entryDate">
          <el-date-picker
            v-model="value1"
            type="date"
            placeholder="Pick a date"
            :default-value="new Date()"
            style="width: 375px"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item
      label="入境交通方式:"
      prop="entryTransportation"
      style="margin-right: 100px; width: 500px"
    >
      <el-input v-model="ruleForm.entryTransportation" />
    </el-form-item>

    <el-form-item class="btn-box">
      <el-button>取消</el-button>
      <el-button type="primary" @click="onSubmit">确定</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
import { reactive, ref, defineComponent, onMounted } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { useStore } from "vuex";
import { useRoute } from "vue-router";
import { number } from "echarts";
import axios from "axios";

export default defineComponent({
  name: "ConfirmedCasesEdit ",
  setup() {
    const store = useStore();
    const route = useRoute();
    let ruleFormRef = ref<FormInstance>();
    let value1 = ref("");
    let row = route.query.id;
    let arr: any = reactive([]);
    let data = eval("(" + route.query.key + ")");

    let ruleForm = reactive({
      caseType: "",
      assistanceLetter: "",
      caseSource: "",
      name: "",
      sex: "",
      age: "",
      birthday: "",
      idNum: "",
      phoneNum: "",
      job: "",
      workUnit: "",
      workAddress: "",
      residenceAddress: "",
      address: "",
      overseasAddress: "",
      livingEnvironment: "",
      familyMembersInfo: "",
      height: "",
      weight: "",
      controlTime: "",
      otherCountry: "",
      route: "",
      country: "",
      passportNum: "",
      entryPort: "",
      entryDate: "",
      entryTransportation: "",
      controlSituation: "",
    });

    //正则
    let rules = reactive<FormRules>({
      name: [
        {
          required: true,
          message: "请输入姓名",
          trigger: "blur",
        },
        { min: 2, max: 5, message: "请输入正确的姓名", trigger: "blur" },
        {
          pattern: /^([\u4E00-\u9FA5]+|[a-zA-Z]+)$/,
          message: "姓名只能包含汉子或者英文",
          trigger: ["change", "blur"],
        },
      ],
      sex: [
        {
          required: true,
          message: "请选择性别",
          trigger: "change",
        },
      ],
      birthday: [
        {
          required: true,
          message: "请选择性别",
          trigger: "change",
        },
      ],
      idNum: [
        {
          required: true,
          message: "请输入身份证号码",
          trigger: "blur",
        },
        { min: 18, max: 18, message: "请输入正确的身份证号", trigger: "blur" },
        {
          pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
          message: "身份证号码输入错误",
          trigger: ["change", "blur"],
        },
      ],
      residenceAddress: [
        {
          required: true,
          message: "请输入户籍地址",
          trigger: "blur",
        },
      ],
      address:[
      {
          required: true,
          message: "请输入现住地",
          trigger: "blur",
        },
      ],
      controlTime:[
        {
          required: true,
          message:'请选择管控时间',
          trigger:['change']
        }
      ]
    });

    onMounted(() => {
      // console.log(row);
      
      // console.log(route.query.key);
      
      console.log(data);
      ruleForm.caseType = data.caseType;
      ruleForm.name = data.name;
      ruleForm.sex = data.sex;
      ruleForm.age = data.age;
      ruleForm.birthday = data.birthday;
      ruleForm.idNum = data.idNum;
      ruleForm.phoneNum = data.phoneNum;
      ruleForm.job = data.job;
      ruleForm.workUnit = data.workUnit;
      ruleForm.workAddress = data.workAddress;
      ruleForm.residenceAddress = data.residenceAddress;
      ruleForm.address = data.address;
      ruleForm.overseasAddress = data.overseasAddress;
      ruleForm.livingEnvironment = data.livingEnvironment;
      ruleForm.familyMembersInfo = data.familyMembersInfo;
      ruleForm.height = data.height;
      ruleForm.weight = data.weight;
      ruleForm.controlTime = data.controlTime;
      ruleForm.otherCountry = data.otherCountry;
      ruleForm.route = data.route;
      ruleForm.country = data.country;
      ruleForm.passportNum = data.passportNum;
      ruleForm.entryPort = data.entryPort;
      ruleForm.entryDate = data.entryDate;
      ruleForm.entryTransportation = data.entryTransportation;
      ruleForm.controlSituation = data.controlSituation;
    });

    let formSize = ref("large");

    let options = Array.from({ length: 10000 }).map((_, idx) => ({
      value: `${idx + 1}`,
      label: `${idx + 1}`,
    }));

    let submitForm = async (formEl: FormInstance | undefined) => {
      if (!formEl) return;
      await formEl.validate((valid, fields) => {
        if (valid) {
          console.log("submit!");
        } else {
          console.log("error submit!", fields);
        }
      });
    };

    let resetForm = (formEl: FormInstance | undefined) => {
      if (!formEl) return;
      formEl.resetFields();
    };

    let tableData = [
      {
        date: "第一次",
        name: "中兴科维",
        address: "2020-11-11 15:00",
      },
      {
        date: "第一次",
        name: "中兴科维",
        address: "2020-11-11 15:00",
      },
    ];

    let onSubmit = () => {
      axios({
        method:'post',
        url:'patient/updatePatientInfo',
        data:{
          id:data.patientId,
          caseType:data.caseType,
          assistanceLetter:data.assistanceLetter,
          caseSource:data.caseSource,
          contactsNum:data.contactsNum,
          name:data.name,
          sex:data.sex,
          age:data.age,
          idNum:data.idNum,
          residenceAddress:data.residenceAddress,
          address:data.address,
          controlSituation:data.controlSituation,
          controlTime:data.controlTime,
          country:data.country,
        }
      }).then(res=>{
        console.log(res);
      })
    };

    return {
      ruleForm,
      rules,
      formSize,
      options,
      submitForm,
      resetForm,
      ruleFormRef,
      value1,
      tableData,
      onSubmit,
    };
  },
});
</script>

<style scoped>
.el-form {
  padding-top: 40px;
  width: 100%;
  background-color: #fff;
}
</style>
